<template>
	<div class="lyw-table">
		<el-table v-loading="props.loading" :data="tableData" max-height="32.5vw" border stripe highlight-current-row :row-style="tableRowStyle">
			<el-table-column v-if="props.check" type="selection" align="center" width="45"> </el-table-column>
			<el-table-column v-if="props.num" label="序列" align="center" type="index" width="55"> </el-table-column>
			<el-table-column prop="date" align="center" label="日期">
				<template #default="scope">
					<i class="iconfont icon-time"></i>
					{{ scope.row.date }}
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="130px">
				<div class="operation">
					<operation-tool
						v-for="(item, index) in operationInfo"
						:key="index"
						v-model:title="item.title"
						v-model:icon="item.icon"
						@click="refactor(item)"
					/>
				</div>
			</el-table-column>
		</el-table>
	</div>
</template>

<script setup>
import { reactive } from 'vue';
import OperationTool from '@/components/common/OperationTool.vue';

const operationInfo = reactive([
	{
		title: '修改',
		icon: 'iconfont icon-refactor',
	},
	{
		title: '删除',
		icon: 'iconfont icon-remove',
	},
]);

const refactor = (item) => {
	console.log(item.title + ' 操作完成');
};

const tableData = reactive([
	{
		date: '2016-05-02',
		name: '王小虎',
		address: '上海市普陀区金沙江路 1518 弄',
	},
	{
		date: '2016-05-04',
		name: '王小虎',
		address: '上海市普陀区金沙江路 1517 弄',
	},
	{
		date: '2016-05-01',
		name: '王小虎',
		address: '上海市普陀区金沙江路 1519 弄',
	},
	{
		date: '2016-05-03',
		name: '王小虎',
		address: '上海市普陀区金沙江路 1516 弄',
	},
	{
		date: '2016-05-03',
		name: '王小虎',
		address: '上海市普陀区金沙江路 1516 弄',
	},
	{
		date: '2016-05-03',
		name: '王小虎',
		address: '上海市普陀区金沙江路 1516 弄',
	},
	{
		date: '2016-05-03',
		name: '王小虎',
		address: '上海市普陀区金沙江路 1516 弄',
	},
	{
		date: '2016-05-03',
		name: '王小虎',
		address: '上海市普陀区金沙江路 1516 弄',
	},
	{
		date: '2016-05-03',
		name: '王小虎',
		address: '上海市普陀区金沙江路 1516 弄',
	},
	{
		date: '2016-05-03',
		name: '王小虎',
		address: '上海市普陀区金沙江路 1516 弄',
	},
]);

const props = defineProps({
	check: {
		type: Boolean,
		default: false,
	},
	num: {
		type: Boolean,
		default: false,
	},
	loading: {
		type: Boolean,
		default: false,
		require: true,
	},
});
</script>

<style lang="scss" scoped></style>
